<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-touch-fullscreen" content="YES">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="../module/ydui/ydui.min.css" rel="stylesheet">
    <link href="../module/swiper/swiper-3.4.1.min.css" rel="stylesheet">
    <script src="../module/ydui/ydui.flexible.min.js"></script>

    <style>
        body, html {
            height: auto;
        }

        body {
            background: #FFFFFF;
            overflow-x: hidden;
        }

        .swiper-container {
            width: 100%;
            height: 5rem;
            background: #DFDFDF;
            background: #000;
        }

        .swiper-slide > img {
            width: 100%;
            /*height: 5rem;*/
        }

        .swiper-pagination-bullet {
            width: 0.6rem;
            height: 0.04rem;
            background: #fff;
            display: inline-block;
            opacity: 0.8;
            border-radius: 0;
            margin: 0 2px !important;
        }

        .swiper-pagination-bullet-active {
            background: #fd6767;
        }

        .topRecomm {
            text-align: center;
            overflow: hidden;
            border-bottom: 0.2rem solid #F4F4F4;
            padding: 0 0.2rem;
        }

        .topRecomm > .grids-item img {
            width: 100%;
        }

        /*楼层开始*/

        .fList, .activSwiper, .hotCategory, .shopItem {
            padding: 0 0.2rem;
        }

        .fBlock img {
            width: 100%;
        }

        .fTitle {
            width: 100%;
            height: 0.4rem;
            background: url("../img/temp/1ftitle.png") no-repeat;
            background-size: contain;
            margin: 0.25rem 0;
        }

        .fbanner, .fswiper {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        .fswiper {
            margin-top: 0.2rem;
        }

        .fswiper .swiper-slide {
            width: 1.44rem;
            margin-right: 0.2rem;
            text-align: center;
        }

        .fswiper h5 {
            margin: 0.16rem 0 0.2rem;
            font-size: 0.24rem;
            font-weight: 100;
        }

        .activBlock {
            background: #F7F7F7;
            width: 100%;
            overflow-x: hidden;
        }

        .activTitle {
            width: 100%;
            height: 1.1rem;
            background: #F7F7F7;
        }

        .activTitle img {
            width: 78%;
            margin-left: 0.06rem;
        }

        .activSwiper .swiper-slide {
            width: 4.97rem;
            height: 6.66rem;
            background: url("../img/temp/act1.png");
            background-size: cover;
            margin-right: 0.2rem;
        }

        .activSwiper .swiper-slide:last-child {
            margin-right: 0;
        }

        .hotCategory img {
            width: 100%;
        }

        .hcList {
            overflow: hidden;
            font-size: 0px;
            border: 0;
            padding: 0px;
            background: red;
            margin-bottom: 0.3rem;
        }

        .hcList > img {
            display: block;
            width: 50%;
            float: left;
            padding: 0;
        }

        .shopList {
            width: 100%;
            color: #424451;
        }

        .shopTitle-fixed-block {
            width: 100%;
            position: relative;
            clear: both;
            height: 1rem;
        }

        .shopTitle {
            width: 100%;
            display: block;
            text-align: center;
            background: #FFFFFF;
            padding: 0 0.2rem;
            border-bottom: 1px solid #F0F0F0;
            overflow: hidden;
            position: absolute;
        }

        .shopTitle li:after {
            width: 0;
            height: 0;
        }

        .shopTitle li.checked {
            color: #DD4E8B;
        }

        .shopItem .list-price {
            color: #DD4E8B;
            margin-right: 0.08rem;
        }

        .shopItem .list-title {
            white-space: inherit !important;
            height: .7rem !important;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-weight: 600;
            margin-top: 0.1rem;
        }

        .shopItem .list-mes-item {
            margin-top: 0.2rem;
        }

    </style>
</head>
<body>

    <!--轮播图-->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="http://static.ydcss.com/uploads/ydui/1.jpg"/></div>
            <div class="swiper-slide"><img src="http://static.ydcss.com/uploads/ydui/2.jpg"/></div>
            <div class="swiper-slide"><img src="http://static.ydcss.com/uploads/ydui/3.jpg"/></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
    <div class="topRecomm">
        <div class="grids-item">
            <img src="../img/temp/i3.png">
            <h5>闪耀时光周</h5>
        </div>
        <div class="grids-item">
            <img src="../img/temp/i3.png">
            <h5>商场同款</h5>
        </div>
        <div class="grids-item">
            <img src="../img/temp/i3.png">
            <h5>设计师品牌</h5>
        </div>
        <div class="grids-item">
            <img src="../img/temp/i3.png">
            <h5>夏季新品</h5>
        </div>
    </div>
    <div class="fList">
        <div class="fBlock">
            <div class="fTitle"></div>
            <div class="fbanner">
                <img src="../img/temp/1f.png">
            </div>
            <div class="fswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="fBlock">
            <div class="fTitle"></div>
            <div class="fbanner">
                <img src="../img/temp/2f.png">
            </div>
            <div class="fswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥299</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥299</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="fBlock">
            <div class="fTitle"></div>
            <div class="fbanner">
                <img src="../img/temp/3f.png">
            </div>
            <div class="fswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥299</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥299</h5>
                    </div>
                </div>
            </div>
        </div>
        <div class="fBlock">
            <div class="fTitle"></div>
            <div class="fbanner">
                <img src="../img/temp/1f.png">
            </div>
            <div class="fswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥199</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="../img/temp/s1.png">
                        <h5>￥299</h5>
                    </div>
                    <div class="swiper-slide">
                        <img src="Http://image01.ccigmall.com/p1/group1/M00/00/CE/CgAyAldWqRmAZH1IAAGeC475BLQ757.jpg">
                        <h5>￥299</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="activBlock">
        <div class="activTitle">
            <img src="../img/index_attbg.png">
        </div>
        <div class="activSwiper">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"></li>
                <li class="swiper-slide"></li>
                <li class="swiper-slide"></li>
            </ul>
        </div>
    </div>
    <div class="hotCategory">
        <div class="fTitle"></div>
        <div class="hcList">
            <img src="../img/temp/hcl1.jpg">
            <img src="../img/temp/hcr2.jpg">
            <img src="../img/temp/hct.jpg">
            <img src="../img/temp/hct.jpg">
            <img src="../img/temp/hcb.jpg">
            <img src="../img/temp/hcb.jpg">

        </div>
        <div class="btmBanner">
            <img src="../img/temp/btm.png">
        </div>
    </div>
    <div class="shopList">
        <div class="shopTitle-fixed-block">
            <ul class="shopTitle">
                <li class="grids-item checked">默认</li>
                <li class="grids-item">按时间</li>
                <li class="grids-item">按销量</li>
                <li class="grids-item">按价格</li>
            </ul>
        </div>
        <section class="g-scrollview" id="J_List">
            <div class="shopItem m-list list-theme1" id="J_ListContent">

            </div>
        </section>
        <script id="J_ListHtml" type="text/html">
            {{each list as data}}
            <a href="{{data.url}}" class="list-item">
                <div class="list-img">
                    <img src="http://static.ydcss.com/uploads/ydui/goods_default.jpg" data-url="{{data.img}}">
                </div>
                <div class="list-mes">
                    <h3 class="list-title">{{data.title}}</h3>

                    <div class="list-mes-item">
                        <div>
                            <span class="list-price"><em>¥</em>{{data.marketprice}}</span>
                            <span class="list-del-price">¥{{data.productprice}}</span>
                        </div>
                    </div>
                </div>
            </a>
            {{/each}}
        </script>
    </div>

<script src="../module/jquery/2.1.4/jquery.min.js"></script>
<script src="../module/swiper/swiper-3.4.1.jquery.min.js"></script>
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script src="../module/ydui/ydui.js"></script>
<script>
    $(function () {
        var obj_ = {
            hasProtoType: false,
            runCheck: function () {
                if (this.hasProtoType == false) {
                    this.hasProtoType = true;
                    this.init.prototype = obj_;
                }
                return this.init();
            },

            shopListMonitor: function (srcel) {
                var self_ = obj_;
                //标题滑动时贴合顶部
                var el = $('.shopTitle');
                var ell = $('.shopTitle-fixed-block');
                if (ell && ell.length > 0) {
                    var coords = ell[0].getBoundingClientRect();
                    if (coords.top < self_.nativeTitleHeight) {
                        el.css({
                            "position": "fixed",
                            "z-index": "999999",
                            "top": self_.nativeTitleHeight + 'px',
                            "clear": "both"
                        });
                    } else {
                        el.css({"position": "absolute", "z-index": "999999", "top": "0", "clear": "both"});
                    }

                }

                //滑动到底部加载商品列表信息
                if (srcel.type == 'scroll' || srcel == 'onscroll') {
                    //console.log($(this).scrollTop() + '-' + ($('body')[0].offsetHeight - $(this).height()));
                    if (($(this).scrollTop() + 1 >= ($('body')[0].offsetHeight - $(this).height()))  && !self_.isRequest) {
                        self_.isRequest = true;
                        //console.log('要到底了');
                        self_.pageNum++;

                        self_.getShopList();
                    }
                }
            },
            runSlide: function () {
                if (typeof Swiper != 'undefined') {
                    var swiperTopBanner = new Swiper('.swiper-container', {
                        pagination: '.swiper-pagination',
                        slidesPerView: 1,
                        paginationClickable: true,
                        loop: true,
                        autoplay: 5000,
                        autoplayDisableOnInteraction: false
                    });

                    var fswiper = new Swiper('.fswiper', {
                        slidesPerView: 'auto',
                        freeModeMomentumRatio: 0.9,
                        freeModeMomentumVelocityRatio: 1,
                        freeMode: true,
                    });

                    var activSwiper = new Swiper('.activSwiper', {
                        slidesPerView: 'auto',
                        freeModeMomentumRatio: 0.9,
                        freeModeMomentumVelocityRatio: 1,
                        freeMode: true,
                    });
                }


                //自动吸附顶部标题需after一个fixed元素
                $('body').after('<div style="width: 0;height: 0;position: fixed;top: 0;left:0;z-index:1;"></div>');
                document.addEventListener('touchmove', obj_.shopListMonitor, false);

                if (document.addEventListener) {
                    window.addEventListener('scroll', obj_.shopListMonitor, false);
                } else {
                    window.attachEvent('onscroll', obj_.shopListMonitor);
                }
            },
            runEvent: function () {
                var self_ = this;
                var sortType = '', sortType_ = '', sortArrowList = ['https://app.shopin.cn/cms/cmsfile/img/sortArrowUp@2.png', 'https://app.shopin.cn/cms/cmsfile/img/sortArrowUp@2.png', 'https://app.shopin.cn/cms/cmsfile/img/sortArrowDown@2.png']
                        , backflag = null;
                $('.shoplist-title>div').on('click', function () {
                    var $that = $(this);


                    if ($that.hasClass('Bytime')) {
                        sortType = '1';
                        console.log('按时间');
                    } else if ($that.hasClass('Bynum')) {
                        sortType = '3';
                        console.log('按销量');
                    } else if ($that.hasClass('Byprice')) {
                        sortType = '2';
                        console.log('按价格');
                    }


                    $that.addClass('r-red').siblings().removeClass('r-red');
                    sortType_ = (sortType == backflag && sortType_ == 2) ? 1 : 2;

                    $that.siblings().find('img').prop('src', sortArrowList[2]);
                    if ($that.find('img').length) {
                        $that.find('img').prop('src', sortArrowList[sortType_]);
                    }


                    if ($that.hasClass('recommend')) {
                        console.log('推荐');
                        sortType = '';
                        sortType_ = '';
                    }


                    backflag = sortType;
                    self_.sortType = sortType + sortType_;
                    console.log(self_.sortType);
                    self_.pageNum = 1;

                    self_.serverEnd = false;
                    self_.getShopList(1);

                });


                $('.shopTitle li').on('click', function () {
                    $(this).addClass('checked').siblings().removeClass('checked');
                });


            },
            getShopList: function () {
                var self_ = this;
                $.ajax({
                    url: 'http://list.ydui.org/getdata.php?type=backposition',
                    dataType: 'jsonp',
                    data: {
                        page: self_.page,
                        pagesize: self_.pageSize
                    },
                    success: function (listArr) {
                        console.log('获取数据！', self_.page);

                        var def = $.Deferred();
                        var html = template('J_ListHtml', {list: listArr});
                        $('#J_ListContent').append(html).find('img').lazyLoad({binder: '#J_List'});
                        def.resolve(listArr);
                        ++self_.page;
                        //解除重复请求限制
                        self_.isRequest = false;
                        return def.promise();

                    }
                });
            },
            init: function () {
                var self_ = this;

                /*self_.i = 0;//滑动计数
                 self_.slideSwitch = false;
                 self_.pageNum = 1;
                 self_.pageSize = 20;
                 self_.sortType = '';

                 self_.isRequest = false;//是否正在请求
                 self_.serverEnd = false;//数据列表页是否无数据

                 self_.updatePrice();*/
                self_.isRequest = false;//是否正在请求
                self_.serverEnd = false;//数据列表页是否无数据
                self_.page = 1;
                self_.pageSize = 10;

                self_.runSlide();
                self_.runEvent();

                self_.getShopList();

                //native标题栏高度
                //self_.nativeTitleHeight = tools.parseUrlParams(window.location.href).height;
                self_.nativeTitleHeight = typeof self_.nativeTitleHeight == 'undefined' ? 0 : self_.nativeTitleHeight;
                //alert(self_.nativeTitleHeight);


            }
        };
        obj_.runCheck();
    });

</script>
</body>
</html>